<template>
    <div>
      <h2>绑定会员卡</h2>
      <el-form :model="form" label-width="120px">
        <el-form-item label="会员卡类型">
          <el-select v-model="form.cardType" placeholder="选择卡类型">
            <el-option label="金卡" value="金卡" />
            <el-option label="银卡" value="银卡" />
            <el-option label="彩卡" value="彩卡" />
          </el-select>
        </el-form-item>
        <el-form-item label="充值次数">
          <el-input type="number" v-model="form.rechargeCount" />
        </el-form-item>
        <el-form-item label="有效期">
          <el-date-picker v-model="form.expiryDate" type="date" placeholder="选择有效期" />
        </el-form-item>
        <el-form-item label="实收金额">
          <el-input type="number" v-model="form.amountReceived" />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-checkbox-group v-model="form.paymentMethods">
            <el-checkbox label="微信" value="微信" />
            <el-checkbox label="支付宝" value="支付宝" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" />
        </el-form-item>
        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </div>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  
  const router = useRouter();
  const route = useRoute();
  
  const form = ref({
    cardType: '',
    rechargeCount: 0,
    expiryDate: '',
    amountReceived: 0,
    paymentMethods: [],
    remark: ''
  });
  
  // 取消操作，返回上一页或其他页面
  const cancel = () => {
    router.back(); // 返回上一页
  };
  
  const confirm = async () => {
    try {
      // 发送数据到后台
      // await axios.post(`/api/users/${route.params.userId}/bind-card`, form.value);
  
      // 跳转回用户列表或其他页面
      router.push({ name: 'Membership' });
    } catch (error) {
      console.error('Error:', error);
      // 显示错误消息
    }
  };
  </script>
  